<template>
  <div>
    <popup v-model="show" position="bottom" class="region-popup" style="width: 100%">
      <div class="title flex border_b p_r30 p_l30 line90">
        <div class="font_size28 color_0d " @click="cancalFn(1)" >取消</div>
        <div class="font_size32 color_33 flex-1 t_center">选择银行卡</div>
        <div class="font_size28 color_0d  t_right" @click="cancalFn(2)">确定</div>
      </div>
      <picker :slots="slots" valueKey="name"  className="color_0d" @change="onValuesChange"  :itemHeight="40"></picker>
    </popup>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui';
  import { Popup } from 'mint-ui';
    export default {
      name: "BankList",
      data() {
        return{
          show: true,
          slots: [
            {
              flex: 1,
              values: [],  //省份数组
              className: 'slot1',
              textAlign: 'center',
            }
          ],
          band_name: '',
          band_id: ''
        }

      },
      components: {
        Picker,
        Popup
      },
      created(){
        this.getbankList()
      },
      methods: {
        getbankList(){
          this.$util.get('user/bankList',{
            uid: this.$store.state.userinfo.uid
          }).then(data => {
            if(data.status == 1){
              this.slots[0].values = data.data
              console.log( data)
            }
          })
        },
        onValuesChange(picker, values) {
          console.log(values)
          if(values){
            this.band_name = values[0].name
            this.band_id = values[0].id
          }
        },
        cancalFn(type){
          this.show = !this.show
          if(type == 2){
            this.$store.commit('setbankname', this.band_name )
            this.$store.commit('setbankid', this.band_id )
          }
          this.band_name = ''
          this.band_id = ''
        },
      }
    }
</script>

<style scoped>

</style>
